<script setup>
import {reactive, ref} from 'vue'

let awesome = ref(true)

</script>

<template>
  <div>
    <h1 v-if="awesome">Vue is awesome!</h1>
    <h1 v-else>Oh no 😢</h1>
    <button @click="awesome = !awesome">Toggle</button>
  </div>

  <div>
   <h1 id="ha" v-show="awesome">Vue is awesome!</h1>
   <h1 id="hb" v-if="awesome">Vue is awesome!</h1>
   <h1 id="hc" v-else>Oh no 😢</h1>
   <button @click="awesome = !awesome">Toggle</button>
  </div>

</template>

<style scoped>

</style>